<template>
	<view class="select-menu" @click="show = true">
		<view v-if="value[1]" class="value">
			{{ text }}
		</view>
		<view v-else class="placeholder">
			请选择宠物笼具
		</view>
		<image class="right-icon" src="@/static/image/right.png"></image>
	</view>
	<up-popup :show="show" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					笼具方式
				</view>
				<picker-view :value="Cage" @change="handleChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data[Cage[0]]?.second" :key="index">{{item.name}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		},
		value: {
			type: Array,
			default: () => []
		}
	})
	const change = () => {
		setTimeout(() => {
			props.data.forEach((item, index) => {
				if(item.id == props.value[0]) {
					item.second.forEach((item2, index2) => {
						if(item2.id == props.value[1]) {
							text.value = item2.name
							Cage.value = [index, index2]
						}
					})
				}
			})
		})
	}
	defineExpose({
		change
	})
	const show = ref(false)
	const Cage = ref([0, 0])
	const handleChange = (e) => {
		console.log(e);
		Cage.value = e.detail.value
	}
	const text = ref('')
	const emits = defineEmits(['change'])
	const handleSumbit = () => {
		show.value = false
		let petCate = props.data[Cage.value[0]]
		let data = [petCate.id, petCate.second[Cage.value[1]].id]
		// console.log(data);
		text.value = petCate.second[Cage.value[1]].name
		emits('change', petCate.second[Cage.value[1]].id)
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		text-align: left;
	}
</style>